<template>
  <div class="test">

    <div class="Myheader">
      <h4>公式识别与检测系统</h4>
      <textarea style="width: 100%;min-height: 300px">{{ msg }}</textarea>
    </div>


    <canvas
      id="myCanvas"
      ref="myCanvas"
      :style="{'background-image': 'url('+imgUrl+')'}"
      :width="width"
      :height="height"
      @click="findRect"
      @mousedown="mousedown"
      @mouseup="mouseup"
      @mousemove="mousemove"
    >
    </canvas>
  </div>
</template>

<script>


import { getMiqie } from '@/api/emsboot/latex'

export default {
  name: 'index',
  data() {
    return {
      msg: '',
      flag: false,
      rectWidth: 0,  //矩形框的宽
      rectHeight: 0, //矩形框的高
      totalRect: [],  //画的所有的矩形坐标长度数据存储在数组中
      downX: 0,  //鼠标点击图片落下时的位置（X）
      downY: 0,   //鼠标点击图片落下时的位置（Y）
      ctx: '',   //dom节点
      canvas: null,
      rectTag: false,
      delIndex: null,  //删除时选中的矩形框的index
      atime: null,
      dialogVisible: true,  //删除的弹出框,
      imgUrl: 'http://81.68.190.172:8083/system/file/showPic?path=',
      //浏览器参数
      width: null,
      height: null,
      words_result: [],
      fileId: null,
      canvasData: null
    }
  },
  created() {
    this.fileId = this.$route.query.fileId
    this.imgUrl = this.imgUrl + this.fileId
    // 创建实例对象
    var img = new Image()
    // 图片地址
    img.src = this.imgUrl
    var width_1 = document.body.clientWidth
    var height_1 = document.body.clientHeight
    img.onload = (res => {
      width_1 = img.width
      height_1 = img.height

      this.width = width_1
      this.height = height_1

      this.canvas = this.$refs.myCanvas
      this.ctx = this.canvas.getContext('2d')

      getMiqie(this.fileId).then(res => {
        this.canvasData = JSON.parse(res.msg)
        this.initView()
      })
    })

  },

  mounted() {

  },

  methods: {
    initView() {
      let data = this.canvasData
      console.log('initView')
      console.log(data)
      this.words_result = data.words_result
      for (const item of data.words_result) {
        let location = item.location
        this.drawRect(location.left, location.top
          , location.width, location.height)
      }

    },
    // 放下鼠标
    mousedown(e) {
      return false
      console.log('鼠标落下')
      this.atime = new Date().getTime()
      this.flag = true
      this.downX = e.offsetX // 鼠标落下时的X
      this.downY = e.offsetY // 鼠标落下时的Y
      this.mousemove(e)
    },
    // 移动鼠标
    mousemove(e) {
      return false
      if (this.flag) {
        //判断如果重右下往左上画，这种画法直接return
        if (this.downX - e.offsetX > 0 || this.downY - e.offsetY > 0) {
          console.log('重右下往左上画')
          return
        } else {
          console.log('重左上往右下画')
          //如果重左上往右下画，计算出鼠标移动的距离，也就是矩形框的宽和高
          this.rectWidth = Math.abs(this.downX - e.offsetX)
          this.rectHeight = Math.abs(this.downY - e.offsetY)
          console.log('this.rectWidth', this.rectWidth)
          console.log('this.rectHeight', this.rectHeight)
          //判断这个宽高的长度，如果小于10，直接return，因为鼠标移动距离过于短
          //防止点击页面时,会画成一个点，没有意义
          if (this.rectWidth < 10 || this.rectHeight < 10) {
            console.log('只是点击')
            this.rectWidth = 0
            this.rectHeight = 0
            return
          }
          this.clear()   //清空画布
          this.redrawAll()
          this.drawRect(
            this.downX,
            this.downY,
            this.rectWidth,
            this.rectHeight
          )
        }
      }
    },
    // 抬起鼠标
    mouseup(e) {
      return false
      // console.log("鼠标抬起");
      this.flag = false
      let a = new Date().getTime()
      if (a - this.atime > 150) {
        this.rectTag = false
      } else {
        this.rectTag = true
      }
      if (this.rectWidth || this.rectHeight) {
        //将画出的数据保存在totalRect中
        this.totalRect.push({
          beforex: this.downX,
          beforey: this.downY,
          rectW: this.rectWidth,
          rectH: this.rectHeight
        })
      }
    },
    redrawAll() {
      //    console.log("先画之前画过的图，保证画多个的时候看起来像前一个不消失");
      if (this.totalRect.length > 0) {
        this.totalRect.forEach((e) => {
          //    console.log("eeeeeeeeeeeeeeeee",e);
          this.drawRect(e.beforex, e.beforey, e.rectW, e.rectH)
        })
      }
    },
    //清除画布
    clear() {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
    },
    drawRect(x, y, lineW, lineY) {
      //   开始绘制;
      this.ctx.beginPath()
      //   //设置线条颜色，必须放在绘制之前
      this.ctx.strokeStyle = '#850a1e'
      //   console.log("44444444");
      //   // 线宽设置，必须放在绘制之前
      this.ctx.lineWidth = 2
      //   console.log("5555555555");
      // strokeRect参数：（左上角x坐标，y:左上角y坐标，绘画矩形的宽度，绘画矩形的高度）
      this.ctx.strokeRect(x, y, lineW, lineY)
      //   console.log("66666666666666");
    },
    getInfo(x, y) {

      for (const item of this.words_result) {
        let location = item.location
        if (x >= location.left && x <= (location.left + location.width)) {
          if (y >= location.top && y <= (location.top + location.height)) {
            return item
          }
        }
      }

      return '未识别'
    },
    //点击画布
    findRect(e) {
      this.msg = this.getInfo(e.offsetX, e.offsetY)

      console.log(e)

      if (this.rectTag) {
        console.log('eeeeeeeeeee', e)
        console.log('this.totalRect', this.totalRect)
        //当点击画布的时候，计算有没有点再矩形框内、哪个矩形框内
        this.totalRect.map((item, index) => {
          if (
            e.offsetX - item.beforex > item.rectW ||
            e.offsetX < item.beforex ||
            e.offsetY - item.beforey > item.rectH ||
            e.offsetY < item.beforey
          ) {
            return
          } else {
            //找到之后，设置下标
            this.delIndex = index
            //打开删除弹框
            this.dialogVisible = true
            console.log('this.delIndex', this.delIndex)
          }
        })
      }
    },
    //点击删除按钮
    del() {
      this.dialogVisible = false
      //删除
      this.ctx.clearRect(
        this.totalRect[this.delIndex].beforex - 2,
        this.totalRect[this.delIndex].beforey - 2,
        this.totalRect[this.delIndex].rectW + 4,
        this.totalRect[this.delIndex].rectH + 4
      )
      //删掉totalRect的数据，真正的项目中需要调用后台接口，删掉数据库中存储的数据
      this.totalRect.splice(this.delIndex, 1)
      //删掉之后，再画一次，刷新页面
      this.redrawAll()
      console.log(this.totalRect, '删除了没')
    }
  }
}
</script>

<style scoped>
.Myheader {
  padding: 12px;
  background-color: white;
  margin: 28px;
  border: 1px solid black;
  width: 448px;
  right: 0;
  z-index: 20;
  position: fixed
}

#myCanvas {
  background-color: #316bde;

}

.dislog {
  width: 200px;
  height: 200px;
  background-color: pink;
}
</style>
